<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../css/common.css" /> -->
    <link href="../css/mui.min.css" rel="stylesheet">
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF8b23KBR4I5abL25PcVB930nkq2XeMAs&sensor=false"
    async defer></script> -->
<style>
#header {
  border-bottom: 1px solid #ccc;
}
li {
  list-style: none;
}
#Vehicle,#Workload,#Violation  {
  white-space: normal;
  background-color: #5571be;
  color: #fff;
  /*padding: 0;*/
}

     </style>
</head>
<body>
	<div  id="wrap">
    <!-- <div id="header"> -->
        <!-- <h1>车辆管理</h1> -->
    <!-- </div> -->
    <div id="main">

      <div class="mui-content" id="muiContent">

      </div>
      <div class="mui-content">
        <div class="mui-row">
          <div class="mui-col-xs-4">
            <!-- <ul class="mui-table-view"> -->
              <li class="mui-table-view-cell">
                <!-- <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> -->
                <button id="Vehicle" type="button">Vehicle Monitoring</button>
              </li>
          </div>
          <div class="mui-col-xs-4">
            <!-- <ul class="mui-table-view"> -->
              <li class="mui-table-view-cell">
                <button id="Workload">Workload Statistics</button>
              </li>
            <!-- </ul> -->
          </div>
          <div class="mui-col-xs-4">
            <!-- <ul class="mui-table-view"> -->
              <li class="mui-table-view-cell">
                <button id="Violation">Violation Statistics</button>
              </li>
            <!-- </ul> -->
          </div>
        </div>
      </div>
      </div>
	</div>
</body>
<script id="template" type="text/x-dot-template">
{{ for (var key in it) { }}
<div class="mui-row">
  <ul class="mui-table-view" s>
    <li class="mui-table-view-cell">Trucks Are Off-line
        <span class="mui-badge mui-badge-danger">{{=it[key]['Off-line']}}</span>
    </li>
    <li class="mui-table-view-cell">Trucks Are On-line
        <span class="mui-badge mui-badge-success">{{=it[key]['On-line']}}</span>
    </li>
    <li class="mui-table-view-cell">Grabage Bins Are Cleaned
        <span class="mui-badge mui-badge-success">{{=it[key].Cleand}}</span>
    </li>
    <li class="mui-table-view-cell">Grabage Bins Are Not Cleaned
        <span class="mui-badge mui-badge-danger">{{=it[key].NotCleand}}</span>
    </li>
  </ul>
</div>
{{ } }}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/ajax.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script>
  apiready = function() {
    let Vehicle = $api.byId('Vehicle');
    let Workload = $api.byId('Workload');
    let Violation = $api.byId('Violation');

    var muiContent = $api.byId('muiContent');
    // let garbageData =  $api.getStorage('garbageData');
    var template = $api.byId('template');
    var interText = doT.template(template.innerHTML);
    getVehicle(interText);
    //  车辆
    Vehicle.addEventListener('click', function() {
      api.openWin({
          name: 'CarHeader',
          url: './CarHeader.html',
          bounces: false,
          slidBackEnabled: false
      });
    });
    //  工作量
    Workload.addEventListener('click', function() {
      api.openWin({
          name: 'WorkHeader',
          url: './WorkHeader.html',
          bounces: false,
          slidBackEnabled: false
      });
    });
    //  车辆统计
    Violation.addEventListener('click', function() {
      api.openWin({
          name: 'ViolationHeader',
          url: './ViolationHeader.html',
          bounces: false,
          slidBackEnabled: false
      });
    });
  }
</script>
</html>
